<template>

<!-- <div v-if="show" class="loading-box-index">
    
        <div class="pageLoading bgModal" ></div>
        <div class="pageLoading loadingWrap borderBox" >
            <img src="./loading-change.gif">
            <p>正在加载</p>
        </div>
    </div> -->
<transition :name="transition">
    <div
      class="weui-loading_toast vux-loading"
      :class="!text ? 'vux-loading-no-text' : ''"
      v-show="show">
      <div class="weui-mask_transparent"></div>
      <div
        class="weui-toast"
        :style="{
          position: position
        }">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content" ><slot>loading</slot></p>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    text: String,
    transition: String,
    position: String,
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      //   show: false
    };
  },
  created() {}
};
</script>

<style lang="less" scoped> 
// @import '../../style/widget/weui-tips/weui-mask.less';
@import '../../style/widget/weui-tips/weui-toast.less';
@import '../../style/widget/weui-loading/weui-loading.less';
.weui-loading{
  height: 100px;
}
// .bgModal {
//   visibility: visible;
//   width: 100%;
//   height: 100%;
//   left: 0;
//   top: 0;
//   z-index: 9998;
//   position: fixed !important;
//   _position: absolute;
//   // _background-image: url(about:blank);
//   _background-attachment: fixed;
//   // _top: expression(eval(document.documentElement.scrollTop));
// }
// .borderBox {
//   width: 250px;
//   height: 250px;
//   border-radius: 20px;
//   position: fixed;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   text-align: center;
//   z-index: 999999;
//   background-color: rgba(0, 0, 0, 0.5);
//   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000, endcolorstr=#7F000000);
// }
// .borderBox > img {
//   height: 150px;
// }
// .borderBox > p {
//   margin-top: 5px;
//   font-size: 34px;
//   color: #ececec;
// }
</style>

